<template>
  <a-table
    :columns="columns"
    :data-source="tableData"
    :pagination="false"
    :scroll="{ x: 1500 }"
    :row-selection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }"
  >
    <!-- 物流方式 -->
    <span slot="logisticsName" slot-scope="text, record">
      <div class="ect-no">
        <span>
          {{
            record.logisticsName === null || record.logisticsName === ""
              ? "暂无"
              : record.logisticsName
          }}
        </span>
        <span class="inventory">
          {{ record.sign === "1" ? "签" : "否" }}
        </span>
      </div>
    </span>
    <!-- 订单商品 -->
    <span slot="recordList" slot-scope="text, record">
      <span v-for="item in record.recordList" :key="item.key">
        {{ item.sku }}*{{ item.inputNumber }}<br />
      </span>
    </span>
    <!-- 、、物流单号 -->
    <span slot="waybillNo" slot-scope="text, record">
      <div class="ect-no">
        <span>
          {{
            record.isEctn === "1"
              ? record.ectnNo
              : record.waybillNo === null
              ? "暂无"
              : record.waybillNo
          }}
        </span>
        <span class="inventorys">
          {{ record.isEctn === "1" ? "自" : "未" }}
        </span>
      </div>
    </span>
    <!-- 状态 -->
    <span
      slot="applyState"
      slot-scope="text, record"
      :style="
        record.applyState === '暂缓处理'
          ? 'color:#ff9933'
          : record.applyState === '异常订单'
          ? 'color:#F3381D'
          : 'color:#3eae7c'
      "
    >
      {{ record.applyState }}
    </span>
    <!-- 备注 -->
    <span slot="remark" slot-scope="text, record">
      {{
        record.remark === null || record.remark === ""
          ? "暂无备注"
          : record.remark
      }}
    </span>
    <span slot="action" class="action" slot-scope="text, record">
      <a
        slot="action"
        href="javascript:;"
        @click="submitData(record, 'submit')"
        v-if="['待提交'].includes(OutboundKeys)"
        >提交</a
      >
      <a-divider type="vertical" v-if="['待提交'].includes(OutboundKeys)" />
      <a
        slot="action"
        href="javascript:;"
        @click="eidtRow(record, 'edit')"
        v-if="['待提交'].includes(OutboundKeys)"
        >编辑</a
      >
      <a-divider type="vertical" v-if="['待提交'].includes(OutboundKeys)" />

      <a
        slot="action"
        href="javascript:;"
        @click="eidtRow(record, 'info')"
        v-if="
          ['正在处理', '已发货', '异常订单', '暂缓处理', '待仓库处理'].includes(
            OutboundKeys
          )
        "
        >订单详情</a
      >
      <a-divider type="vertical" v-if="['待仓库处理'].includes(OutboundKeys)" />

      <a
        slot="action"
        href="javascript:;"
        @click="submitData(record, 'withdraw')"
        v-if="['待仓库处理'].includes(OutboundKeys)"
        >撤回</a
      >

      <a-popconfirm
        title="确定删除该条数据吗?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="deleteRow(record)"
        v-if="['待提交'].includes(OutboundKeys)"
      >
        <a href="javascript:;" style="color:red; border-bottom: 1px solid red;">删除</a>
      </a-popconfirm>
    </span>
  </a-table>
</template>

<script>
import {
  Outbound_del,
  Outbound_submit,
  Outbound_recallt,
} from "@/apis/clientSide/OrderManage/Outbound";
export default {
  props: ["tableData", "OutboundKeys", "getOutboundTableList", "getStateCount"],
  data() {
    return {
      SKUTablieData: [],
      //表格checked数组
      selectedRowKeys: [], // Check here to configure the default column
    };
  },
  mounted(){
    this.$bus.$off('clearSelectedKeys')
    this.$bus.$on('clearSelectedKeys',()=>{
      this.selectedRowKeys=[];
    })
  },
  methods: {
    // 表格checked框
    onSelectChange(selectedRowKeys, selectedRows) {
      // 传递给父亲
      this.$emit("selectedRowKeys", selectedRowKeys, selectedRows);
      this.selectedRowKeys = selectedRowKeys;
    },
    //编辑每一行
    eidtRow(rowData, flag) {
      setTimeout(() => {
        this.$bus.$emit("OutboundRowData", rowData, flag);
      }, 1);
    },
    //删除每一行
    async deleteRow(record) {
      let { code } = await Outbound_del(record.key.split(","));
      if (code === "10000") {
        this.getOutboundTableList();
        this.getStateCount();
      }
    },
    submitData(record, flag) {
      let _this = this;
      if (flag === "submit") {
        this.$confirm({
          title: "确认提交订单编号为" + record.orderNumber + "数据吗?",
          cancelText: "取消",
          okText: "确认",
          onOk() {
            return new Promise((resolve) => {
              setTimeout(async () => {
                let { code } = await Outbound_submit(
                  `${record.key}/${record.revision}`
                );
                if (code === "10000") {
                  resolve();
                } else {
                  resolve();
                  // _this.$message.error("缺少SKU商品,无法提交！");
                }
              }, 1000);
            }).then(() => {
              _this.getOutboundTableList();
              _this.getStateCount();
            });
          },
        });
      } else if (flag === "withdraw") {
        this.$confirm({
          title: "确认撤回订单编号为" + record.orderNumber + "的数据吗?",
          cancelText: "取消",
          okText: "确认",
          onOk() {
            return new Promise((resolve) => {
              setTimeout(async () => {
                let { code } = await Outbound_recallt(record.key);
                if (code === "10000") {
                  resolve();
                }
              }, 1000);
            }).then(() => {
              _this.getOutboundTableList();
              _this.getStateCount();
            });
          },
        });
      }
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "订单编号",
          dataIndex: "orderNumber",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "8%",
        },
        {
          title: "出库仓库",
          dataIndex: "warehouseName",
          align: "center",
          width: "8%",
        },
        {
          title: "收件人",
          dataIndex: "recipient",
          align: "center",
          width: "8%",
        },
        {
          title: "订单商品",
          dataIndex: "recordList",
          // ellipsis: true,
          scopedSlots: { customRender: "recordList" },
          align: "center",
          width: "12%",
        },
        {
          title: "物流商",
          dataIndex: "logisticsName",
          scopedSlots: { customRender: "logisticsName" },
          align: "center",
          width: "18%",
        },
        {
          title: "物流单号",
          dataIndex: "waybillNo",
          scopedSlots: { customRender: "waybillNo" },
          align: "center",
          width: "15%",
        },

        {
          title: "运费",
          dataIndex: "logisticsCost",
          //   scopedSlots: { customRender: "createTime" },
          align: "center",
          width: "5%",
        },
        {
          title: "更新时间",
          dataIndex: "updateTime",
          scopedSlots: { customRender: "updateTime" },
          align: "center",
          width: "10%",
        },
        {
          title: "订单状态",
          dataIndex: "applyState",
          scopedSlots: { customRender: "applyState" },
          align: "center",
          width: "10%",
        },
        {
          title: "备注",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" },
          align: "center",
          width: "12%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: 150,
          fixed: "right",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.ect-no {
  display: flex;
  justify-content: center;
  span:nth-child(1) {
    width: 60%;
  }
  span:nth-child(2) {
    // width: 40%;
    align-self: center;
  }
}
.inventory {
  margin-left: 5px;
  // margin-left: 3px;
  display: inline-block;
  width: 22px;
  height: 22px;
  // line-height: 22px;
  font-size: 12px;
  border: 1px solid #70a2c6;
  border-radius: 50%;
  background: #70a2c6;
  color: #fff;
  text-align: center;
}
.inventorys {
  // margin-left: 3px;
  display: inline-block;
  width: 22px;
  line-height: 22px;
  font-size: 12px;
  border: 1px solid rgb(148, 200, 84);
  border-radius: 50%;
  background: rgb(148, 200, 84);
  color: #fff;
  text-align: center;
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
</style> 